<template>
  <div>
    Boundary<br>
    <p style="background-color: gray">
      $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
    </p>
    before&nbsp;&nbsp;after
    <boundary-child ref="childComponent"></boundary-child>
    <input type="text" ref="inputRef">
    <button @click="getRefHeight">getHeight</button>
    <ul>
      <li v-for="i in 10" ref="liRef">{{i}}</li>
    </ul>
  </div>
</template>

<script>
  import BoundaryChild from './BoundaryChild'

  export default {
    name: "Boundary",
    components: {
      BoundaryChild
    },
    mounted() {
      console.log(this.$root.msg)
    },
    methods: {
      getRefHeight() {
        console.log(this.$refs.childComponent)
        console.log(this.$refs.childComponent.$el.clientWidth)
        this.$refs.inputRef.focus()
        console.log(this.$refs.liRef)
      },
      getMap(){
        console.log('getMap')
      }
    },
    data() {
      return {
        msg: 'hello!'
      }
    },
    provide: function () {
      return {
        getMap: this.getMap
      }
    }
  }
</script>

<style scoped>

</style>
